<!--
 * @Author: wangyu
 * @Date: 2024-12-26 12:59:15
 * @LastEditTime: 2024-12-27 17:30:40
 * @LastEditors: wangyu
 * @Description: 园区内部阻力情况详细数据
 * @FilePath: \dzsq-smartpark-platform\src\views\assetsManager\components\leaseDetailedTable.vue
-->
<template>
  <comHeaer title="园区内部租赁情况"></comHeaer>
  <div class="leaseDetailedTable">
    <div>
      <div class="header">
        <div>楼栋号</div>
        <div>房间号</div>
        <div>租赁企业</div>
        <div>租赁状态</div>
        <div>当前租赁状态</div>
      </div>
      <vue3-seamless-scroll
        :list="data"
        class="list"
        :step="step"
        :hover="true"
      >
        <ul v-for="item in data" :key="item.name">
          <li>{{ item.name }}</li>
          <li>{{ item.fjh }}</li>
          <li>{{ item.zlqy }}</li>
          <li>{{ item.zlzt }}</li>
          <li class="zt" :class="item.dqzlzt">{{ item.dqzlztName }}</li>
        </ul>
      </vue3-seamless-scroll>
    </div>
    <!-- <vChart :option="option" style="margin-top: 16px" /> -->
    <div id="aChart" style="flex: 1"></div>
  </div>
</template>

<script setup>
import comHeaer from "../../components/comHeader/index.vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import Charts from "@/utils/initEcharts";
import * as echarts from "echarts";
import { onMounted } from "vue";
const step = ref(0.3);
const colors = ["#59DEFF", "#239aff"];
const option = ref({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985",
      },
    },
  },
  color: [colors[1], colors[0]],
  legend: {
    data: ["企业入驻数量", "企业完缴数量"],
    icon: "rect",
    textStyle: {
      color: "#ffffff",
    },
    top: "5%",
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "10%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: ["2018", "2019", "2020", "2021", "2022", "2023", "2024"],
    axisLabel: {
      color: "#ffffff",
    },
  },
  yAxis: [
    {
      type: "value",
      axisLabel: {
        color: "#ffffff",
      },
      splitLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: "企业入驻数量",
      type: "line",
      stack: "Total",
      smooth: 0.4,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(31, 183, 211, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(119, 219, 237, 0.1)", // 100% 处的颜色
            },
          ],
          false
        ),
      },
      lineStyle: {
        color: colors[0],
      },
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: "企业完缴数量",
      type: "line",
      stack: "Total",
      smooth: 0.4,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(31, 183, 211, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(119, 219, 237, 0.1)", // 100% 处的颜色
            },
          ],
          false
        ),
      },
      lineStyle: {
        color: colors[1],
      },
      data: [220, 182, 191, 234, 290, 330, 310],
    },
  ],
});
const data = ref([
  {
    name: "201",
    fjh: "101",
    zlqy: "xx股份有限公司",
    zlzt: "在租",
    dqzlzt: "normal",
    dqzlztName: "正常",
  },
  {
    name: "202",
    fjh: "101",
    zlqy: "xx股份有限公司",
    zlzt: "在租",
    dqzlzt: "normal",
    dqzlztName: "正常",
  },
  {
    name: "203",
    fjh: "101",
    zlqy: "xx股份有限公司",
    zlzt: "在租",
    dqzlzt: "normal",
    dqzlztName: "正常",
  },
  {
    name: "204",
    fjh: "101",
    zlqy: "xx股份有限公司",
    zlzt: "在租",
    dqzlzt: "normal",
    dqzlztName: "正常",
  },
  {
    name: "205",
    fjh: "101",
    zlqy: "xx股份有限公司",
    zlzt: "在租",
    dqzlzt: "zjwjq",
    dqzlztName: "租金未缴清",
  },
  {
    name: "206",
    fjh: "101",
    zlqy: "xx股份有限公司",
    zlzt: "在租",
    dqzlzt: "zjqj",
    dqzlztName: "租金欠缴",
  },
  {
    name: "207",
    fjh: "101",
    zlqy: "xx股份有限公司",
    zlzt: "在租",
    dqzlzt: "normal",
    dqzlztName: "正常",
  },
  {
    name: "208",
    fjh: "101",
    zlqy: "xx股份有限公司",
    zlzt: "在租",
    dqzlzt: "normal",
    dqzlztName: "正常",
  },
  {
    name: "209",
    fjh: "101",
    zlqy: "xx股份有限公司",
    zlzt: "在租",
    dqzlzt: "normal",
    dqzlztName: "正常",
  },
  {
    name: "210",
    fjh: "101",
    zlqy: "xx股份有限公司",
    zlzt: "在租",
    dqzlzt: "normal",
    dqzlztName: "正常",
  },
  {
    name: "211",
    fjh: "101",
    zlqy: "xx股份有限公司",
    zlzt: "在租",
    dqzlzt: "normal",
    dqzlztName: "正常",
  },
  {
    name: "212",
    fjh: "101",
    zlqy: "xx股份有限公司",
    zlzt: "在租",
    dqzlzt: "normal",
    dqzlztName: "正常",
  },
]);
const myCharts = ref();
let chartsObj = null;
let changePieInterval;
onMounted(() => {
  chartsObj = new Charts(document.getElementById("aChart"), option.value);
  myCharts.value = chartsObj.init();
  autoPlay(myCharts.value);
});
const autoPlay = (myChart) => {
  changePieInterval = setInterval(selectPie, 3000); // 设置自动切换高亮图形的定时器
  let currentIndex = -1;
  const highlightPie = () => {
    // 取消所有高亮并高亮当前图形
    // 遍历饼图数据，取消所有图形的高亮效果
    for (var idx in option.value.series[0].data)
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
        dataIndex: idx,
      });
    //取消所有图形的toolTip效果
    myChart.dispatchAction({
      type: "hideTip",
    });
    // 高亮当前图形
    myChart.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: currentIndex,
    });
    // 展示toolTip效果
    myChart.dispatchAction({
      type: "showTip",
      seriesIndex: 0,
      dataIndex: currentIndex,
    });
  };

  myChart.on("mouseover", (params) => {
    // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
    if (changePieInterval) clearInterval(changePieInterval);
    currentIndex = params.dataIndex;
    highlightPie();
  });

  myChart.on("mouseout", (params) => {
    // 用户鼠标移出时，重新开始自动切换
    if (changePieInterval) clearInterval(changePieInterval);
    changePieInterval = setInterval(selectPie, 3000);
  });

  function selectPie() {
    // 高亮效果切换到下一个图形
    var dataLen = option.value.series[0].data.length;
    currentIndex = (currentIndex + 1) % dataLen;
    highlightPie();
  }
};
</script>
<style scoped lang="scss">
.leaseDetailedTable {
  display: flex;
  font-size: 16px;
  flex-direction: column;
  height: calc(100% - 58px);
  .list {
    width: 100%;
  }
  .header {
    display: flex;
    align-items: center;
    margin-top: 10px;
    > div {
      flex: 1;
      line-height: 36px;
      height: 36px;
      text-align: center;
    }
  }
  .list {
    height: 400px;
    overflow: hidden;
    ul {
      display: flex;
      align-items: center;
      padding-inline-start: 0px;
      list-style-type: none;
      background-color: rgba(236, 236, 236, 0.1);

      > li {
        flex: 1;
        text-align: center;
      }
    }
  }
  .normal {
    color: #19be6b;
  }

  .zjwjq {
    color: #ffa94c;
  }
  .zjqj {
    color: #fb6260;
  }
}
</style>
